// 详情页面的js代码
// 1. 先显示加载层
// let index = layer.load(0, { shade: [0.3, '#ccc'] });
// 获取商品id---sessionStorage获取
let id = sessionStorage.getItem('goodsId');
if (!id && !/^\d+$/.test(id)) {
  layer.msg('非法请求');// 弹窗提示,然后跳转
  location.href = 'list.html';
}
// 根据商品id获取商品详情并渲染
$.ajax({
  url: '../server/detail.php',
  data: { id },
  dataType: 'json',
  success(res) {
    let { meta: { status }, data } = res;
    // 判断请求数据是否成功
    if (status == '1') {
      layer.msg('非法请求');// 
      location.href = 'list.html';
    } else {
      // 数据请求成功.,将数据渲染
      let pic = data.imgpath.split('==========')[0];  
      $('.middle>img').attr('src', pic); // 渲染中图
      $('.big>img').attr('src', pic); // 渲染中大图
      let pics = data.imgpath.split('==========');  
      // 遍历图片数据并组装html字符串然后渲染
      $('.small>.wraper>ul').html(pics.map(v => `<li><img src=${v} /></li>`).join(''));  
      // 调用放大镜函数
      enlarge();
      // 将商品库存渲染到id="num"的输入框中
      $('#num').attr('stock', data.stock);
      //渲染标题和价格及详情
      $('.description>h4').text(data.name);
      $('.souceprice>span').text(data.price);
      $('.free>span').text(data.introduce);
      // 如果有商品详情则渲染商品详情,没有则渲染商品介绍
      $('.details .tab>ol>li').first().html(data.detail);
  
      // 给每一个ul>li点击事件
      $('.details .tab>ul>li').click(function () {
      // 将点击的这个li添加active类名,其他ul>li移除active
      // 根据索引找到ol>li添加active类名.其他的ol>li移除active类名
      $(this)             // 找到点击的这个ol>li
      .addClass('active') //添加active
      .siblings()         // 找到兄弟元素
      .removeClass('active') // 移除兄弟元素的active
      .parent()           // 找到父元素 ul
      .next()             // 下一个兄弟元素 ol
      .find('li')         // 找到后代元素中li  ol>li
      .eq($(this).index()) // 根据索引找到对应 ol>li
      .addClass('active') // 添加active
      .siblings()        // 找到兄弟元素
      .removeClass('active'); // 移除其他li的acitve
      // $('ol>li').eq($(this).index()).addClass('active').siblings().removeClass('active');
  })
      layer.close(index);
    }
  }
})
// 点击购买商品数量的累加
$('.add').click(function () {
  // 只要点击了加的按钮,就解除键按钮的禁用
  $(this).next().prop('disabled', false);
  // 获取到商品的库存
  let stock = $(this).prev().attr('stock') - 0;// -0减值转为数值
  // 获取输入框中的值
  let n = $(this).prev().val() - 0;
  n++;
  if (n >= stock) {
    $(this).prop('disabled', true);// 禁用点击按钮
    // 将最大库存渲染到输入框
    $(this).prev().val(stock);
  }
  $(this).prev().val(n);
})
// 点击购买商品数量的递减
$('.reduce').click(function () {
  // 只要点击了减的按钮,就解除加按钮的禁用
  $(this).prev().prop('disabled', false);
  // 获取到商品的库存
  let stock = $(this).prev().prev().attr('stock') - 0;// -0减值转为数值
  // 获取输入框中的值
  let n = $(this).prev().prev().val() - 0;
  n--;
  if (n <= 1) {
    $(this).prop('disabled', true);// 禁用点击按钮
    // 将最小购买数渲染到输入框
    $(this).prev().prev().val(stock);
  }
  $(this).prev().prev().val(n);
})

// 点击进入购物车
$('.toCart').click(function () {
  // 通过cookie获取用户名
  let username = getCookie('username');
  // 判断用户是否登录
  if (!username) {
    layer.msg('请先登录');
    // location.href = 'login.html';
    setTimeout(function(){
      location.href = 'login.html?from=cart';
    },1000)
    // clearTimeout(timer)
    return false;
  }
  // 已经登录则跳转至购物车页面
  location.href = 'cart.html';
  return false;
})

// 点击加入购物车
$('.addBtn').click(function () {
  // 通过cookie获取用户名
  let username = getCookie('username');
  // 判断用户是否登录
  if (!username) {
    layer.msg('请先登录');
    // location.href = 'login.html';
    setTimeout(()=>{
      location.href = 'login.html?from=add';
    },1000)
    // clearTimeout(timer)
    return;
  }
  // 用户已经登录则加入购物车

  // 获取库存
  let stock = $('#num').attr('stock') - 0;
  // 获取本次购买数量
  let num = $('#num').val() - 0;
  // 组装加入购物车的数据
  let cartObj = { username, id, num };

  // 获取本地购物车数据
  let str = localStorage.getItem('goodsData');
  // 购物车数组
  let arr;
  if (!str) { // 之前购物车为空
    arr = [cartObj];
  } else {
    // 判断用户之前是否添加过此商品的购物车
    let cartArr = JSON.parse(str);
    let cart = cartArr.find(v => {
      return v.id === id && v.username === username;
    });
    if (!cart) { // 之前没有添加过购物车
      cartArr.push(cartObj);
      arr = cartArr;
      layer.msg('加入购物车成功');
    
    } else {
      let n1 = cart.num - 0; // 之前添加购物车的数量
      let n2 = n1 + num;
      if (n2 > stock) { // 添加的商品数超过库存
        layer.msg('购物数量超过库存');
        n2 = stock;
      } else {
        layer.msg('加入购物车成功');
      }
      // 将购买数累加并赋值给对象cart的num属性
      cart.num = n2;
      arr = cartArr
      $('.counti-cons-bg>span').text(n2)
    }
  }
  // 将购物车数据arr写到localStorage中
  localStorage.setItem('goodsData', JSON.stringify(arr));

})
// 购买商品的输入框失去焦点事件
$('#num').blur(function () {
  // 获取输入的内容
  let val = $(this).val();
  if(!/^\d+$/.test(val)){ // 校验只能为数字
    layer.msg('请输入购买数');
    $(this).val(1);
    return;
  }
  // 获取库存
  let stock = $(this).attr('stock');
  if(val<1 || val>stock){
    layer.msg('购买数超出库存');
    $(this).val(1);
    return;
  }
})



// 二级菜单下拉展开,上拉收起
$('.range').parent().hover(function(){
  $(this).find('.menu-nav').stop().slideDown().css('z-index','100')
},function(){
  $(this).find('.menu-nav').stop().slideUp()
})

// 三级菜单显示隐藏
$('.menu-nav>li').hover(function(){
$(this).css('backgroundColor','#fff').find('a').first().css('color','#f00581').parent().find('.menu-menu').css({
  'display':'block',
  'z-index':'100'
})
},function(){
  $(this).css('backgroundColor','#f00581').find('a').first().css('color','#fff').parent().find('.menu-menu').css({
      'display':'none'
  })
})

